<script setup lang="ts">
import { Delete, Finished } from '@element-plus/icons-vue'
import { defaultPagingParams } from '../index'
import { PAGING } from '@/constant'
// ------------------use------------------
// #region
const emits = defineEmits<{
  search: []
  reset: []
  batch: []
}>()
const query = defineModel({
  default: () => defaultPagingParams,
})
const [options, setOptions] = useState<any[]>([])
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onBeforeMount(() => {
  getOptions()
})
// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
async function getOptions() {
  const { data } = await sysDictionaryEncoApi.queryList(
    'SHI_JIAN_KE_LI',
  )
  setOptions(data.filter(item => item.dicKey !== '0m'))
}
/** 重置 */
async function reset() {
  query.value = {
    ...defaultPagingParams,
    pointId: query.value.pointId,
  }
  await nextTick()
  emits('reset')
}
async function search() {
  Object.assign(query.value, PAGING.PARAMS)
  await nextTick()
  emits('search')
}
// #endregion
</script>

<template>
  <el-form
    inline
    label-width="120px"
    label-position="left"
    class="flex-incompressible width-fill"
  >
    <el-form-item
      label="时间类型"
      prop="key"
      label-width="80px"
    >
      <ElSelect
        v-model="query.key"
        class="free"
        style="width: 80px"
      >
        <ElOption
          v-for="option in options"
          :key="option.dicValue"
          :label="option.dicValue"
          :value="option.dicKey"
        />
      </ElSelect>
    </el-form-item>
    <el-form-item label="指标编码/名称">
      <el-input
        v-model.trim="query.name"
        maxlength="20"
        placeholder="请输入关键词查找"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <SearchButton @click="search" />
      <el-button plain :icon="Delete" @click="reset">
        清空
      </el-button>
      <el-button
        type="primary"
        :icon="Finished"
        @click="$emit('batch')"
      >
        批量重算
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
